<template>
  <div>
    <!-- <ul> -->
      <!-- :to必须要加：才会当模板解析 -->
      <!-- <router-link tag='li' v-for=" movie in list" :key="movie.id" :to="`/movie/detail/${movie.id}/${movie.nm}`">{{movie.nm}}</router-link>
    </ul> -->

    <!-- 只要往这个子组件里面添加东西，就要添加插座 -->
    <!-- <router-view></router-view> -->
    <ul>
      <!-- <router-link
        tag="li"
        :to="`/movie/detail/${movie.id}/${movie.nm}`"
        v-for="movie in list"
        :key="movie.id"
      >
        {{movie.nm}}
      </router-link> -->
      <li
        v-for="movie in list"
        :key="movie.id"
        @click="handleClick(movie.id, movie.nm)"
      >
        {{movie.nm}}
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  data(){
    return {
      list: []
    }
  },

  methods:{
    handleClick(id, nm){
      // this.$router.push(`/movie/detail/${id}/${name}`);


      //可以探究一下使用<router-link></router-link>为什么不会出现导航重复的报错
      //可以作为一个技术提升研究点
      // if(this.$route.fullPath !== `/movie/detail/${id}/${name}`){ 
      if(this.$route.params.nm !== nm){ 
      
        this.$router.push({name: "moviedetail", params: {id,nm}, query:{x:1} ,aa:{bb:11}});
      }
    }
  },
  mounted(){
    fetch("/ajax/movieOnInfoList?token=&optimus_uuid=333C2740231F11EAB8EFE18B6402E96FC5D9186442FD4610B0BC29ED3F4F842E&optimus_risk_level=71&optimus_code=10")
      .then(response => response.json())
      // .then(response => response.text())
      .then(data => {
        // console.log(data);
        this.list = data.movieList;
      })
  }
}
</script>

<style lang="stylus" scoped>

</style>